<template>
    <Layout>

        <!-- 头部 -->
        <div class="TopBanner">
            <div class="container">
                <div class="row row--30">
                    <div class="col-lg-12">
                        <p class="Banner-ti">数据驱动 智慧生活</p>
                        <h2 class="Banner-Zhong">关于我们 创造不凡</h2>
                        <h2 class="Banner-Bot">让品牌故事触动人心</h2>
                    </div>
                    <div class="col-lg-12">
                        <p class="Banner-Cul"><span>精雕细琢十载</span>|<span
                                style="margin: 0px 2px;">API安全稳固</span>|<span>品质之选</span></p>
                    </div>
                    <div class="col-lg-12">
                        <div class="BannerBotBtn">
                            <button class="BannerBotBtn-1" @click="ShowNow">立即咨询</button>
                            <!-- <button class="BannerBotBtn-2" @click="NowRegister">立即注册</button> -->

                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 公司简介 -->
        <div class="CompanyProfile">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h6 class="CompanyfH6">公司简介</h6>
                    </el-col>
                </el-row>
                <el-row :gutter="20">
                    <el-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" class="CompanyBox">
                        <p class="Companyp1"></p>
                        <p class="Companytitlep">
                            锦锐科技有限公司深耕行业十八年，自2005年以来，专注深耕互联网技术、云通信技术、软件开发，经过多年快速发展，业务遍及国内外市场，形成以郑州为中心，上海、北京、贵阳、福建、淮南、青岛等为副中心的集团式发展，于2015年重组成立锦锐科技，正式改制形成集团化运作的公司。我们是一家专业为企业和政府提供云通信、软件开发、系统集成、智慧物联和数据治理全方位解决方案和运营的公司，可为客户提供全球的综合服务解决方案及治理能力。
                        </p>
                    </el-col>
                    <el-col :span="12" :xs="24" :sm="24" :md="12" :lg="12" class="CompanyBoxT">
                        <img src="../assets/images/banner/aboutus.png" alt="" class="CompanyImg">
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 五大理由 -->
        <div class="FiveReasons">
            <div class="container">
                <el-row class="FiveResBox">
                    <el-row>
                        <el-col :span="24">
                            <h6 class="XuanZeFive">选择我们的理由</h6>
                        </el-col>
                    </el-row>
                    <el-row class="FiveContBox">
                        <div style="display: flex;align-items: center;justify-content: space-around;">
                            <el-col  class="FiveCBox1">
                            <h5>强大的功能性</h5>
                            <p class="FiveCtp1">我们的API覆盖了从金融服务到电子商务，从社交媒体到数据分析的广泛应用，满足不同行业的需求。</p>
                        </el-col>
                        <el-col  class="FiveCBox1">
                            <h5>易于集成和使用</h5>
                            <p class="FiveCtp1">我们提供清晰的API文档和丰富的开发工具，使得集成过程简便快捷，即使是非技术背景的用户也能轻松上手。</p>
                        </el-col>
                        <el-col  class="FiveCBox1">
                            <h5>可扩展与灵活性</h5>
                            <p class="FiveCtp1">随着业务的增长，您的需求也可能变化。我们的API服务设计灵活，支持按需扩展，能够随着您的业务增长而适应新的挑战。</p>
                        </el-col>
                        <el-col  class="FiveCBox1">
                            <h5>安全可靠</h5>
                            <p class="FiveCtp1">保护您的数据安全是我们的责任。我们的API服务采用行业领先的安全协议和加密技术，确保数据传输和处理过程的安全与合规。</p>
                        </el-col>
                        <el-col  class="FiveCBox1">
                            <h5>快速和高效</h5>
                            <p class="FiveCtp1">深厚的基础架构,自研的操作系统，多年技术锤炼和海量服务经验，为客户提供高性能、易运维、智能化、弹性化的云服务。</p>
                        </el-col>
                        </div>

                    </el-row>
                </el-row>

            </div>
        </div>

        <!-- 产品矩阵 -->
        <div class="ProductMatrix">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h5 class="Matrixh5">全方位产品矩阵</h5>
                    </el-col>
                </el-row>
                <el-row>
                    <el-row :gutter="20" style="margin-bottom: 10px;">
                        <el-col :span="5" :offset="3">
                            <div class="MatrixZhBoxs" @click="gotoProduct">
                                <img src="../assets/images/banner/matritu.png" alt="" class="matriz1">
                                <h6 class="matriz2">实名认证</h6>
                                <i class="el-icon-arrow-right matriz3"></i>
                            </div>
                        </el-col>
                        <el-col :span="5" v-for="(item, indexm) in fenlei1" :key="indexm">
                            <div class="MatrixZhBoxs" @click="gotoProduct">
                                <img :src="item.img" alt="" class="matriz1">
                                <h6 class="matriz2">{{ item.name}}</h6>
                                <i class="el-icon-arrow-right matriz3"></i>
                            </div>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20" style="margin-bottom: 50px;">
                        <el-col :span="5" :offset="3">
                            <div class="MatrixZhBoxs" @click="gotoProduct">
                                <img src="../assets/images/banner/matritu5.png" alt="" class="matriz1">
                                <h6 class="matriz2">邮箱</h6>
                                <i class="el-icon-arrow-right matriz3"></i>
                            </div>
                        </el-col>
                        <el-col :span="5" v-for="(item, indexm2) in fenlei2" :key="indexm2">
                            <div class="MatrixZhBoxs" @click="gotoProduct">
                                <img :src="item.img" alt="" class="matriz1">
                                <h6 class="matriz2">{{ item.name}}</h6>
                                <i class="el-icon-arrow-right matriz3"></i>
                            </div>
                        </el-col>
                    </el-row>
                </el-row>
            </div>
        </div>

        <!-- 优质的服务 -->

        <div class="GoodFServe">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h6 class="XuanZeSix">优质的服务</h6>
                    </el-col>
                   <el-row :gutter="20">
                    <el-col :span="24" style="margin-bottom: 50px;">
                        <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8">
                            <div class="GoodFServeB">
                                <img src="../assets/images/banner/jiqiren.png" alt="">
                                <h6 class="GoodFSB2">快速响应原则</h6>
                                <p class="GoodFSB3">客户反映的质量问题须在4⼩时内答复；所有质量问题，必须在第⼀时间内帮助客户解决问题。</p>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8">
                            <div class="GoodFServeB">
                                <img src="../assets/images/banner/jiqiren.png" alt="">
                                <h6 class="GoodFSB2">增值服务原则</h6>
                                <p class="GoodFSB3">客户享⽤公司产品的同时，公司积极为客户提供技术⽀持、新产品推荐、最新市场信息反馈，使客户利益最⼤化，感受增值服务。</p>
                            </div>
                        </el-col>
                        <el-col :span="8" :xs="24" :sm="24" :md="8" :lg="8">
                            <div class="GoodFServeB">
                                <img src="../assets/images/banner/jiqiren.png" alt="">
                                <h6 class="GoodFSB2">换位思考原则</h6>
                                <p class="GoodFSB3">站在客户的⻆度，思考客户需求；真⼼感受客户担忧，切实解决好产品和服务中的问题。</p>
                            </div>
                        </el-col>
                    </el-col>
                   </el-row>

                </el-row>
            </div>
        </div>

        <!-- 我们的里程碑 -->
        <div class="OurMilestones">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h6 class="OurMilesBei">我们的里程碑</h6>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <div class="OurTrend">
                            <div class="OurTrendBGC"></div>
                            <h6 class="OurTrendH1">启航</h6>
                            <h6 class="OurTrendH2">推广</h6>
                            <h6 class="OurTrendH3">发展</h6>
                            <h6 class="OurTrendH4">成长</h6>
                            <h6 class="OurTrendH5">创新</h6>
                            <h6 class="OurTrendH6">未来</h6>
                            <div class="OurTrendH7">
                                <h6 class="Trendti">2014年</h6>
                                <p>从2015年开始，公司开始采用API优先的设计策略，这种策略使得软件开发更加高效，能够更快地响应市场变化和客户需求。</p>
                            </div>
                            <div class="OurTrendH8">
                                <h6 class="Trendti">2016年</h6>
                                <p>随着技术的进步，公司不断引入新的技术栈，如三号要素核验和语音外呼等，这些技术的应用不仅提升了API的性能和效率，还丰富了开发的可能性。</p>
                            </div>
                            <div class="OurTrendH9">
                                <h6 class="Trendti">2018年</h6>
                                <p>在这一时期，积极拓展客户市场，通过建立合作伙伴关系等方式进入新的地区和行业，有效提升了公司的国际影响力，被广泛应用于金融、银行、法院、保险等多个行业，通过提供定制化的解决方案，帮助这些行业解决数据集成和自动化的问题。
                                </p>
                            </div>
                            <div class="OurTrendH10">
                                <h6 class="Trendti">2020年</h6>
                                <p>随着公司业务的广泛应用，安全问题日益突出，投入大量资源确保API的安全性，如实施细粒度授权框架、更新和强化OAuth标准等，面对全球不断变化的数据保护法规，公司不断调整其策略和工具，以确保关键法规的要求。
                                </p>
                            </div>
                            <div class="OurTrendH11">
                                <h6 class="Trendti">2022年</h6>
                                <p>随着数字化转型的深入，开始将API视为独立的产品和服务进行销售，通过提供定制化的解决方案，实现了新的收入来源，构建和维护一个健康的API市场平台，允许开发者和企业自由交易API，这不仅促进了API的流通和创新，也为公司带来了额外的经济效益。
                                </p>
                            </div>
                            <div class="OurTrendH12">
                                <h6 class="Trendti">2024年</h6>
                                <p>API的未来是高度动态和不断进化的特性，面对这些变化，需要时刻保持敏捷和灵活，不断地调整策略和管理实践，以最大化的经济潜力确保技术的前瞻性，通过这样的努力，可以更好地推动创新，提升运营效率，并在激烈的市场竞争中保持领先地位。
                                </p>
                            </div>
                        </div>
                    </el-col>
                </el-row>
            </div>
        </div>

        <!-- 我们的资质与荣誉 -->
        <div class="Qualifications">
            <div class="container">
                <el-row>
                    <el-col :span="24">
                        <h6 class="QualificaH6">我们的资质与荣誉</h6>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24" class="QualificaImgBX">
                        <el-col :span="6" v-for="(itemimg,zzindex) in shisiximg" :key="zzindex">
                            <img :src="itemimg.img" alt="">
                        </el-col>
                       
                    </el-col>
                </el-row>
            </div>
        </div>

        <RegisterPage></RegisterPage>
    </Layout>
</template>

<script>
import Layout from '../components/common/Layout'
import Team from '../components/elements/team/Team'
import RegisterPage from '../components/register/register.vue'

export default {
    name: 'About',
    components: { Team, Layout ,RegisterPage},
    data() {
        return {

            fenlei1:[
                {
                    id:1,
                    name:"运营商",
                    img:require('../assets/images/banner/matritu2.png'),
                },
                {
                    id:2,
                    name:"银行卡",
                    img:require('../assets/images/banner/matritu3.png'),

                },
                {
                    id:3,
                    name:"虚拟号",
                    img:require('../assets/images/banner/matritu4.png'),

                },
            ],
            fenlei2:[
            {
                    id:1,
                    name:"车架号",
                    img:require('../assets/images/banner/matritu6.png'),

                },
                {
                    id:2,
                    name:"智能识别",
                    img:require('../assets/images/banner/matritu7.png'),

                },
                {
                    id:3,
                    name:"企业工商",
                    img:require('../assets/images/banner/matritu8.png'),

                },
            ],
            shisiximg:[
                {
                    id:1,
                    img:require('../assets/images/banner/zizhi1.png'),
                },
                {
                    id:2,
                    img:require('../assets/images/banner/zizhi2.png'),
                },
                {
                    id:3,
                    img:require('../assets/images/banner/zizhi3.png'),
                },
                {
                    id:4,
                    img:require('../assets/images/banner/zizhi4.png'),
                },
                {
                    id:5,
                    img:require('../assets/images/banner/zizhi5.png'),
                },
                {
                    id:6,
                    img:require('../assets/images/banner/zizhi6.png'),
                },
                {
                    id:7,
                    img:require('../assets/images/banner/zizhi7.png'),
                },
                {
                    id:8,
                    img:require('../assets/images/banner/zizhi8.png'),
                },
                {
                    id:9,
                    img:require('../assets/images/banner/zizhi9.png'),
                },
                {
                    id:10,
                    img:require('../assets/images/banner/zizhi10.png'),
                },
                {
                    id:11,
                    img:require('../assets/images/banner/zizhi11.png'),
                },
                {
                    id:12,
                    img:require('../assets/images/banner/zizhi12.png'),
                },
                {
                    id:13,
                    img:require('../assets/images/banner/zizhi13.png'),
                },
                {
                    id:14,
                    img:require('../assets/images/banner/zizhi14.png'),
                },
                {
                    id:15,
                    img:require('../assets/images/banner/zizhi15.png'),
                },
                {
                    id:16,
                    img:require('../assets/images/banner/zizhi16.png'),
                },

            ]

        }
    },
    methods:{
        // 立即查看
        ShowNow(){
            this.$router.push({
				    path: '/seekadfrom'
				})
        },
        NowRegister(){
            this.$router.push({
				    path: '/register'
				})
        },
        gotoProduct(){
            this.$router.push({
				    path: '/product'
				})
        }

    }
}
</script>
<style lang="scss" scoped>
.TopBanner {
    width: 100%;
    margin: 0 auto;
    color: #fff;
    // height: 700px;
    /* background-color: #ccc; */
    background-image: url('../assets/images/banner/guanyudbgc.png');
    background-size: 100% 100%;

    .Banner-ti {
        margin-top: 5%;
        font-family: serif;
        font-size: 48px;
    }

    .Banner-Zhong {
        margin: 5px 0px;
        font-size: 68px;
        font-weight: 700;
    }

    .Banner-Bot {
        font-weight: 400;
        font-size: 68px;
        margin-bottom: 20px;
    }

    .Banner-Cul {
        margin-bottom: 4%;
        font-size: 20px;
    }

    .BannerBotBtn {
        display: flex;
        margin-bottom: 20%;

        .BannerBotBtn-1 {
            width: 160px;
            border: 2px solid #62C3D0;
            /* border: 3px solid transparent; */
            color: #62C3D0;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            margin: 0px 10px 0px 0px;
            height: 59px;
            background-color: transparent;
        }
        
        .BannerBotBtn-2 {
            width: 160px;
            border: 2px solid #e30083;
            color: #fff;
            font-size: 20px;
            border-radius: 3px;
            font-weight: 600;
            height: 59px;
            margin: 0px 5px 0px 0px;
            background-color: #e30083;
        }
    }
    @media screen and (max-width: 1200px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 32px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 52px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 52px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 16px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 140px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 50px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 140px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 18px;
                border-radius: 3px;
                font-weight: 600;
                height: 50px;

                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }
    }


    @media screen and (max-width: 768px) {
        .Banner-ti {
            margin-top: 5%;
            font-family: serif;
            font-size: 20px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 36px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 40px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 14px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 100px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 40px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 100px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 14px;
                border-radius: 3px;
                font-weight: 600;
                height: 40px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }

    @media screen and (max-width: 500px) {
        .Banner-ti {
            margin-top: 8%;
            font-family: serif;
            font-size: 16px;
        }

        .Banner-Zhong {
            margin: 5px 0px;
            font-size: 20px;
            font-weight: 700;
        }

        .Banner-Bot {
            font-weight: 400;
            font-size: 30px;
            margin-bottom: 20px;
        }

        .Banner-Cul {
            margin-bottom: 4%;
            font-size: 12px;
        }

        .BannerBotBtn {
            .BannerBotBtn-1 {
                width: 80px;
                border: 2px solid #62C3D0;
                /* border: 3px solid transparent; */
                color: #62C3D0;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                margin: 0px 10px 0px 0px;
                height: 30px;
                background-color: transparent;
            }

            .BannerBotBtn-2 {
                width: 80px;
                border: 2px solid #e30083;
                color: #fff;
                font-size: 12px;
                border-radius: 3px;
                font-weight: 600;
                height: 30px;
                margin: 0px 5px 0px 0px;
                background-color: #e30083;
            }
        }

    }
}

// 公司简介
.CompanyProfile {
    width: 100%;
    overflow: hidden;

    .CompanyfH6 {
        text-align: center;
        font-size: 28px;
        color: #3D3D3D;
        margin: 50px 0 20px 0;
    }

    .CompanyBox {
        padding: 50px 50px;
    }

    .Companyp1 {
        width: 130px;
        height: 40px;
        margin: 0 0 20px 50px;
    }

    .Companytitlep {
        font-size: 14px;
        color: #3D3D3D;
        padding: 0 50px;
    }

    .CompanyBoxT {
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 50px 50px;

        .CompanyImg {
            width: 65%;
        }
    }

}


// 五大理由
.FiveReasons {
    width: 100%;
    overflow: hidden;
    box-sizing: border-box;
    background-image: url('../assets/images/banner/fively.png');

    .FiveResBox {
        background-size: 100% 100%;
    }

    .XuanZeFive {
        font-size: 26px;
        color: #3D3D3D;
        margin: 50px 0 30px 0;
        text-align: center;
    }

    .FiveContBox {
        // display: flex;
        margin-bottom: 50px;
    }

    .FiveCBox1 {
        width: 200px;
        height: 300px;
        text-align: left;
        padding: 30px 36px;
        background-color: #fff;
        border-radius: 5px;
        background-size: 100% 100%;
        cursor: pointer;
    }

    .FiveCBox1:hover {
        background-image: url('../assets/images/banner/fivecbgc.png');
        transition:all 0.5s ease;
        color: #fff;
    }

    .FiveCtp1 {
        margin: 10px 0;
    }
}


// 产品矩阵
.ProductMatrix {
    width: 100%;
    overflow: hidden;
    background-color: #FAFAFA;

    .Matrixh5 {
        font-size: 26px;
        margin: 60px 0 30px 0;
        text-align: center;
    }

    .MatrixZhBoxs {
        background-color: #fff;
        display: flex;
        align-items: center;
        // justify-content: space-between;
        padding: 10px;
        cursor: pointer;
    }

    .matriz1 {
        width: 50px;
    }

    .matriz2 {
        font-size: 16px;
        font-weight: 600;
    }

    .matriz3 {
        margin-left: 40%;
    }
}


// 优质的服务
.GoodFServe {
    width: 100%;
    overflow: hidden;
    background-color: #FAFAFA;

    .XuanZeSix {
        font-size: 26px;
        color: #3D3D3D;
        margin: 30px 0;
        text-align: center;
    }

    .GoodFServeB {
        text-align: center;
        padding: 20px;
        background-color: #fff;
        margin: 5px 0;
        .GoodFSB2 {
            font-weight: 600;
            margin: 5px 0;
        }

        .GoodFSB3 {
            height: 71px;
            text-align: left;
            font-size: 14px;
        }
    }
}

// 我们的里程碑
.OurMilestones {
    width: 100%;
    height: 900px;
    background-image: url('../assets/images/banner/lichengbei.png');

    .OurMilesBei {
        font-size: 26px;
        color: #3D3D3D;
        margin: 30px 0;
        text-align: center;
    }

    .OurTrend {
        position: relative;

        .OurTrendBGC {
            height: 440px;
            background-image: url('../assets/images/banner/trendqs.png');
            background-size: 100% 100%;
            margin-top: 140px;
        }

        .OurTrendH1 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 6.5%;
            bottom: 9.5%;
        }

        .OurTrendH2 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 21.7%;
            bottom: 8%;
        }

        .OurTrendH3 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 36.7%;
            bottom: 11%;
        }

        .OurTrendH4 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 51.7%;
            bottom: 21%;
        }

        .OurTrendH5 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 66.7%;
            bottom: 36%;
        }

        .OurTrendH6 {
            font-size: 20px;
            color: #fff;
            position: absolute;
            left: 81.7%;
            bottom: 64%;
        }

        .OurTrendH7 {
            width: 180px;
            position: absolute;
            left: 4.7%;
            bottom: 25%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }

        .OurTrendH8 {
            width: 180px;
            position: absolute;
            left: 20.7%;
            bottom: -40%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }

        .OurTrendH9 {
            width: 180px;
            position: absolute;
            left: 34.7%;
            bottom: 25%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }

        .OurTrendH10 {
            width: 180px;
            position: absolute;
            left: 50.7%;
            bottom: -45%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }

        .OurTrendH11 {
            width: 180px;
            position: absolute;
            left: 64.7%;
            bottom: 52%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }

        .OurTrendH12 {
            width: 180px;
            position: absolute;
            left: 82.7%;
            bottom: -7%;

            .Trendti {
                color: #0059FF;
                margin-bottom: 10px;
            }
        }
    }
}


// 我们的资质与荣誉
.Qualifications {
    width: 100%;
    overflow: hidden;
    background-color: #FAFAFA;
    margin-bottom: 20px;
    .QualificaH6 {
        font-size: 26px;
        color: #3D3D3D;
        margin: 30px 0;
        text-align: center;
    }
    .QualificaImgBX{
        padding: 5px 200px;
        img{
            width: 200px;
        }
        img:hover{
            transform: scale(1.05);
            transition:all 0.5s ease;
            cursor: pointer;
        }
    }
}
</style>